<div class=features>
  <section class=feat aria-labelledby="validation-title">
    <h2 id="validation-title">Validation!</h2>
    <p>
      Use your favorite validation library (or create your own strategy). Officially supporting Yup, Zod and Superstruct!
    </p>
  </section>
  <section class="feat feat-center" aria-labelledby="error-title">
    <h2 id="error-title">Error reporting!</h2>
    <p>
      With Felte's built-in reporting capabilities you'll need minimal set up to handle your errors! Use any of our reporter packages or build your own to suit your needs.
    </p>
  </section>
  <section class="feat feat-final" aria-labelledby="styling-title">
    <h2 id="styling-title">Easy styling!</h2>
    <p>
      No fighting with custom components or CSS variables. Felte works with plain HTML tags. Write your form as you would any HTML5 form!
    </p>
  </section>
</div>

<style>
  .features {
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .feat {
    max-width: min(30%, 500px);
    min-width: 300px;
    min-height: 250px;
    margin: 1rem;
    padding: 2rem;
    background: var(--feature-background-1);
    border-radius: 10px 30px;
  }

  .feat-center {
    background: var(--feature-background-2);
  }

  .feat-final {
    background: var(--feature-background-3);
  }
</style>
